<template>
  <div class="q-pa-md" style="max-width: 400px">
    <t-form ref="form" submit="onSubmit" @reset="onReset" class="q-gutter-md">
      <div>
        <!-- <t-input
          filled
          v-model="name"
          label="Your name *"
          hint="Name and surname"
          lazy-rules
          :rules="[val => (val && val.length > 0) || 'Please type something']"
        />

        <t-input
          filled
          type="number"
          v-model="age"
          label="Your age *"
          lazy-rules
          :rules="[
            val => (val !== null && val !== '') || 'Please type your age',
            val => (val > 0 && val < 100) || 'Please type a real age',
          ]"
        /> -->
         <!-- <t-discount
          label="测试标题"
          labelPosition="left"
          v-model="name"
          :rules="[val => (val && val > 0) || 'Please type something']"
        /> -->
         <t-discount
          style='opacity:100%'
          class='frmDiscount tr-input-editform'
          instanceCode='frmDiscount'
          label="折扣"
          placeholder="$t('Schema.Page.PageReactiveDOdoMuiltlangComplexCard.Controls.frmDiscount.Placeholder','请输入折扣')"
          helpPlacement='bottom'
          :readonly='false'
          labelPosition='top'
          :tabIndex='1'
          :required='true'
          :visible='true'
          ref='discountRef'

          :rules="[val => (val && val.length > 0) || 'Please type something']"
          v-model='age'
        ></t-discount>
             <t-currency
          ref='currencyRef'
          style='opacity:100%'
          class='frmCurrency tr-input-editform'
          instanceCode='frmCurrency'
          label="$t('Schema.Page.PageReactiveDOdoMuiltlangComplexCard.Controls.frmCurrency.Label','货币')"
          placeholder="$t('Schema.Page.PageReactiveDOdoMuiltlangComplexCard.Controls.frmCurrency.Placeholder','请输入货币')"
          :step='1'
          :precision='3'
          :min='0'
          :max='100'
          fixedRule='1'
          helpPlacement='bottom'
          :readonly='false'
          labelPosition='top'
          :tabIndex='1'
          :required='true'
          :visible='true'
                   :rules="[val => (val && val.length > 0) || 'Please type something']"

          v-model='name'
        >
        </t-currency>
        <t-toggle v-model="accept" label="I accept the license and terms" />
      </div>

      <div>
        <q-btn label="Submit1" type="submit" color="primary" @click="handleClick"/>
        <q-btn
          label="Reset"
          type="reset"
          color="primary"
          flat
          class="q-ml-sm"
        />
        <q-btn label="Focus" @click="$refs.form.focus()" color="primary" />
      </div>
    </t-form>
  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { ref } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const name = ref(null);
    const age = ref(null);
    const accept = ref(false);
    const discountRef = ref(null);
    const currencyRef=ref(null)
    return {
      name,
      age,
      accept,
      discountRef,
      currencyRef,
      handleClick() {
        discountRef.value.validate()
        currencyRef.value.validate()
        // console.log(discountRef.value.validate)

      },
      onSubmit() {
        if (accept.value !== true) {
          $q.notify({
            color: 'red-5',
            textColor: 'white',
            icon: 'warning',
            message: 'You need to accept the license and terms first',
          });
        } else {
          $q.notify({
            color: 'green-4',
            textColor: 'white',
            icon: 'cloud_done',
            message: 'Submitted',
          });
        }
      },

      onReset() {
        name.value = null;
        age.value = null;
        accept.value = false;
      },
    };
  },
};
</script>
